<template>
  <el-dialog
    title="答卷情况"
    :close-on-click-modal="false"
    :visible.sync="visible"
    lock-scroll
    width="70%"
    append-to-body
    @close="$emit('isrRefresh')"
  >
    <div class="JADP-common-layout">
      <div class="JADP-common-layout-left" style="height: 100%">
        <div style="color: #ff6700;">
          提示：<i class="el-icon-close"></i> 表示答题错误，
          <i class="el-icon-check"></i> 表示答题正确，
          其他为未判分的题目，需要阅卷。点击题号可直接查看此题。
        </div>
        <div style="margin-top:10px">
          <el-button-group>
            <el-button @click="quanbu">全部</el-button>
            <el-button @click="weipanfen">未判分</el-button>
            <el-button @click="yipanfen">已判分</el-button>
          </el-button-group>
          <span class="scoreTest">
            <span class="num">{{ TotalScore }}</span> 分
          </span>
        </div>

        <ul class="SerialNum">
          <li v-for="(item, index) in serialList" :key="index">
            <div
              v-if="item.subscore == null"
              class="border"
              @click="SerialNum(index)"
            >
              {{ item.subsort }}
            </div>
            <div
              v-else
              class="border"
              :class="item.status ? 'right' : 'wrong'"
              @click="SerialNum(index)"
            >
              {{ item.subsort }}
            </div>
            <div class="score">{{ item.subscore }}</div>
          </li>
        </ul>
      </div>

      <div class="JADP-common-layout-main JADP-flex-main">
        <div id="maodian"></div>
        <div class="mysubject" v-for="(item, index) in list" :key="item.id">
          <div class="subject_title">
            <span class="font">
              {{ item.subsort }}、[{{
                getDict("topictype", item.xy_ks_subjectEntity.topictype)
              }}]</span
            >
            <span class="title_right" v-if="item.subscore != null">
              <span class="correct" v-if="item.status">对</span>
              <span class="error" v-else>错</span>
            </span>
          </div>
          <div class="subject_body">
            <div v-html="item.xy_ks_subjectEntity.stem"></div>
            <!--单选题  -->
            <div
              v-if="
                item.xy_ks_subjectEntity.topictype ===
                  '7280c24ba6bf410997c739637706e7e6'
              "
            >
              <ul>
                <li
                  v-for="(val, inx) in item.xy_ks_subjectEntity.optionsum"
                  :key="inx"
                >
                  {{ val.label }}、{{ val.value }}
                </li>
              </ul>
              <p>正确答案：{{ item.xy_ks_subjectEntity.result }}</p>
              <p>考生答案：{{ item.answer }}</p>
              <div>
                <el-row>
                  <el-col :span="1">解析:</el-col>
                  <el-col :span="22">
                    <div v-html="item.xy_ks_subjectEntity.answeranalysis"></div>
                  </el-col>
                </el-row>
              </div>
              <p style="margin-top:5px">
                分数：{{ item.score }}分； &nbsp;&nbsp;&nbsp; 得分：
                <el-input
                  v-model="item.subscore"
                  style="width:60px"
                  size="mini"
                  @blur="blur(item)"
                  @input="input(item)"
                ></el-input>
                分
              </p>
            </div>
            <!--多选题  -->
            <div
              v-if="
                item.xy_ks_subjectEntity.topictype ===
                  '1d3f7e7e22c94e49ba95f52e3ec9e3af'
              "
            >
              <ul>
                <li
                  v-for="(val, inx) in item.xy_ks_subjectEntity.optionsum"
                  :key="inx"
                >
                  {{ val.label }}、{{ val.value }}
                </li>
              </ul>
              <p>正确答案：{{ item.xy_ks_subjectEntity.result }}</p>
              <p>考生答案：{{ item.answer }}</p>
              <div>
                <el-row>
                  <el-col :span="1">解析:</el-col>
                  <el-col :span="22">
                    <div v-html="item.xy_ks_subjectEntity.answeranalysis"></div>
                  </el-col>
                </el-row>
              </div>
              <p style="margin-top:5px">
                分数：{{ item.score }}分； &nbsp;&nbsp;&nbsp; 得分：
                <el-input
                  v-model="item.subscore"
                  style="width:60px"
                  size="mini"
                  @blur="blur(item)"
                  @input="input(item)"
                ></el-input>
                分
              </p>
            </div>
            <!--填空题  -->
            <div
              v-if="
                item.xy_ks_subjectEntity.topictype ===
                  'f0b4073bc9ad4426b87cbc70d4526cf6'
              "
            >
              <div style="margin:5px 0">
                正确答案：
                <span
                  v-for="(val, inx) in item.xy_ks_subjectEntity.optionsum"
                  :key="inx"
                  style="margin-right:10px"
                >
                  {{ val.value }};
                </span>
              </div>

              <p style="margin:5px 0">考生答案：{{ item.answer }}</p>
              <div>
                <el-row>
                  <el-col :span="1">解析:</el-col>
                  <el-col :span="22">
                    <div v-html="item.xy_ks_subjectEntity.answeranalysis"></div>
                  </el-col>
                </el-row>
              </div>
              <p style="margin-top:5px">
                分数：{{ item.score }}分； &nbsp;&nbsp;&nbsp; 得分：
                <el-input
                  v-model="item.subscore"
                  style="width:60px"
                  size="mini"
                  @input="input(item)"
                  @blur="blur(item)"
                ></el-input>
                分
              </p>
            </div>
            <!--判断题  -->
            <div
              v-if="
                item.xy_ks_subjectEntity.topictype ===
                  'ee505074164e4d0bb54e4a5136b123fb'
              "
            >
              <div style="margin:20px 0">
                <el-radio-group
                  disabled
                  v-model="item.xy_ks_subjectEntity.result"
                >
                  <el-radio label="正确"></el-radio>
                  <el-radio label="错误"></el-radio>
                </el-radio-group>
              </div>
              <p>正确答案：{{ item.xy_ks_subjectEntity.result }}</p>
              <p>考生答案：{{ item.answer }}</p>
              <div>
                <el-row>
                  <el-col :span="1">解析:</el-col>
                  <el-col :span="22">
                    <div v-html="item.xy_ks_subjectEntity.answeranalysis"></div>
                  </el-col>
                </el-row>
              </div>
              <p style="margin-top:5px">
                分数：{{ item.score }}分； &nbsp;&nbsp;&nbsp; 得分：
                <el-input
                  v-model="item.subscore"
                  style="width:60px"
                  size="mini"
                  @blur="blur(item)"
                  @input="input(item)"
                ></el-input>
                分
              </p>
            </div>
            <!-- 简单题 -->
            <div
              v-if="
                item.xy_ks_subjectEntity.topictype ===
                  '07ba1e3b779b4e1db3c1318d0f80a688'
              "
            >
              <div style="margin:5px 0">
                正确答案：
                <p v-html="item.xy_ks_subjectEntity.result"></p>
              </div>
              <p style="margin:5px 0">考生答案：{{ item.answer }}</p>
              <div>
                <el-row>
                  <el-col :span="1">解析:</el-col>
                  <el-col :span="22">
                    <div v-html="item.xy_ks_subjectEntity.answeranalysis"></div>
                  </el-col>
                </el-row>
              </div>
              <p style="margin-top:5px">
                分数：{{ item.score }}分； &nbsp;&nbsp;&nbsp; 得分：
                <el-input
                  v-model="item.subscore"
                  style="width:60px"
                  size="mini"
                  @blur="blur(item)"
                  @input="input(item)"
                ></el-input>
                分
              </p>
            </div>
          </div>
          <div :id="'maodian' + index"></div>
        </div>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取 消</el-button>
      <el-button type="primary" @click="dataFormSubmit()">确 定</el-button>
    </span>
  </el-dialog>
</template>
<script>
import request from "@/utils/request";
export default {
  name: "yuejuan",
  data() {
    return {
      visible: false,
      list: [],
      serialList: [], //序号list,
      cpid: "",
      stuid: "",
      clazzid: "",
      paperid: ""
    };
  },
  computed: {
    TotalScore() {
      let zongfen = null;
      this.list.forEach(item => {
        if (item.subscore) {
          zongfen += item.subscore * 1;
        }
      });
      return zongfen;
    }
  },
  methods: {
    goBack() {
      this.$emit("refresh", true);
    },
    input(item) {
      if (item.subscore * 1 == item.score) {
        item.status = true;
      } else {
        item.status = false;
      }
      item.subscore = item.subscore.replace(/[^\d.]/g, ""); //清除"数字"和"."以外的字符
      item.subscore = item.subscore.replace(/^\./g, ""); //验证第⼀个字符是数字⽽不是.
      item.subscore = item.subscore.replace(/\.{2,}/g, "."); //只保留第⼀个. 清除多余的
      item.subscore = item.subscore
        .replace(".", "$#$")
        .replace(/\./g, "")
        .replace("$#$", ".");
      item.subscore = item.subscore.replace(
        /^(\-)*(\d+)\.(\d{1}).*$/,
        "$1$2.$3"
      ); //只能输⼊1个⼩数
      if (item.subscore > item.score * 1) item.subscore = item.score;
      if (item.subscore < 0) item.subscore = null;
    },
    init(cpid, stuid, clazzid, paperid) {
      this.visible = true;
      this.cpid = cpid;
      this.stuid = stuid;
      this.clazzid = clazzid;
      this.paperid = paperid;
      request({
        url: "/api/stuAnswer/Xy_ks_stu_answer",
        method: "GET",
        data: {
          clazzid,
          cpid,
          paperid,
          stuid
        }
      }).then(res => {
        this.list = res.data;
        this.list = this.list.sort((a, b) => a.subsort - b.subsort);
        this.list.forEach(item => {
          //将status的字符串类型转为布尔
          item.status = JSON.parse(item.status);
          // 判断不等于简答题，不等于判断题
          if (
            item.xy_ks_subjectEntity.topictype !==
              "07ba1e3b779b4e1db3c1318d0f80a688" &&
            item.xy_ks_subjectEntity.topictype !==
              "ee505074164e4d0bb54e4a5136b123fb"
          ) {
            item.xy_ks_subjectEntity.result = JSON.parse(
              item.xy_ks_subjectEntity.result
            );
            item.xy_ks_subjectEntity.optionsum = JSON.parse(
              item.xy_ks_subjectEntity.optionsum
            );
          }
          if (
            item.xy_ks_subjectEntity.topictype ===
            "1d3f7e7e22c94e49ba95f52e3ec9e3af"
          ) {
            //判断多选，把正确答案的数组转join()
            item.xy_ks_subjectEntity.result = item.xy_ks_subjectEntity.result.join();
          }
          // 判断如果已经给过分数了，就不计算用再次计算分数了
          if (item.subscore == undefined && item.subscore == null) {
            if (
              item.xy_ks_subjectEntity.topictype !==
                "07ba1e3b779b4e1db3c1318d0f80a688" &&
              item.xy_ks_subjectEntity.topictype !==
                "f0b4073bc9ad4426b87cbc70d4526cf6"
            ) {
              //判断不等于简单和填空
              //判断考生答案和正确答案是否正确，答对给满分，答错不给分
              if (item.xy_ks_subjectEntity.result == item.answer) {
                item.subscore = item.score;
                item.status = true;
              } else {
                item.subscore = 0;
                item.status = false;
              }
            } else {
              // 简答和填空的情况根据分数判断
              if (item.subscore * 1 == item.score * 1) {
                item.status = true;
              } else {
                item.status = false;
              }
            }
          }
        });
        this.serialList = this.list;
        console.log(this.list);
      });
    },
    SerialNum(index) {
      if (index) {
        let maodian = "maodian" + (index - 1);
        document.getElementById(maodian).scrollIntoView({
          behavior: "smooth" // 平滑过渡
        });
      } else {
        document.getElementById("maodian").scrollIntoView({
          behavior: "smooth" // 平滑过渡
        });
      }
    },
    //未判分
    weipanfen() {
      this.serialList = this.list.filter(item => {
        if (item.subscore === undefined || item.subscore === null) {
          return true;
        } else {
          return false;
        }
      });
    },
    //已判分
    yipanfen() {
      this.serialList = this.list.filter(item => {
        if (item.subscore === undefined || item.subscore === null) {
          return false;
        } else {
          return true;
        }
      });
    },
    // 全部
    quanbu() {
      this.serialList = this.list;
    },
    // 修改分数调用接口
    blur(val) {
      request({
        url: "/api/stuAnswer/Xy_ks_stu_answer",
        method: "put",
        data: {
          clazzid: this.clazzid,
          stuid: this.stuid,
          paperid: this.paperid,
          cpid: this.cpid,
          subid: val.subid,
          answer: val.answer,
          subscore: val.subscore,
          score: val.score,
          status: val.status
        }
      }).then(res => {});
    },

    //确定
    dataFormSubmit() {
      let flag = true;
      this.list.forEach(item => {
        if (item.subscore == null) {
          this.$message.error("请你做一个合格的老师，分数不能设置为空");
          return (flag = false);
        }
      });
      if (flag) {
        request({
          url: "/api/scoreManage/Xy_ks_students_score",
          method: "put",
          data: {
            clazzid: this.clazzid,
            stuid: this.stuid,
            paperid: this.paperid,
            cpid: this.cpid,
            stuscore: this.TotalScore
          }
        }).then(res => {
          this.$message.success("审核成功");
          this.visible = false;
          this.$emit("refresh", true);
        });
      }
    }
  }
};
</script>
<style scoped lang="scss">
>>> .el-dialog {
  margin-top: 10vh !important;
}
>>> .el-dialog__header {
  border-bottom: 1px solid #ccc;
}
>>> .el-dialog__body {
  padding: 0;
}
li {
  list-style: none;
}
.JADP-common-layout-left {
  min-height: 65vh;
  overflow-y: auto;
  padding: 10px;
  width: 290px;
  .el-icon-check {
    font-weight: 700;
    color: #83cd5e;
  }
  .el-icon-close {
    font-weight: 700;
    color: red;
  }
  .scoreTest {
    float: right;
    font-weight: 600;
    .num {
      font-size: 24px;
      color: #0000ff;
    }
  }
  .SerialNum {
    display: flex;
    flex-wrap: wrap;
    margin-top: 10px;
    li {
      margin-right: 10px;
      .border {
        margin: 0 0px 5px 0;
        display: inline-block;
        width: 40px;
        height: 40px;
        line-height: 25px;
        text-align: center;
        border: 1px solid #eee;
        border-radius: 6px;
        cursor: pointer;
      }
      .wrong {
        background: url("~@/assets/images/cuo.png") no-repeat 50%;
        background-size: contain;
      }
      .right {
        background: url("~@/assets/images/dui.png") no-repeat 50%;
        background-size: contain;
      }
      .score {
        text-align: center;
        height: 20px;
      }
    }
  }
}
.JADP-common-layout-main {
  width: 100%;
  background-color: #fff;
  height: 67vh;
  overflow-y: auto;
  padding: 10px;
  padding-right: 30px;
  .subject-main {
    margin-top: 10px;
    padding-left: 20px;
  }
  .mysubject {
    margin-bottom: 10px;
    padding: 10px 0;
    border-bottom: 1px solid #ccc;
    .subject_title {
      .checkbox {
        cursor: pointer;
      }
      .font {
        font-size: 18px;
        font-weight: 600;
      }
      .title_right {
        float: right;
        margin-right: 30px;
        padding-top: 3px;
        font-weight: 600;
        font-size: 16px;
        .error {
          color: #ff0000;
        }
        .correct {
          color: #67c23a;
        }
      }
    }
    .subject_body {
      margin-top: 20px;
      margin-left: 25px;
      line-height: 22px;
      ul {
        margin-top: 10px;
        li {
          line-height: 30px;
          >>> .el-radio__label {
            font-size: 16px;
          }
        }
      }
      >>> .el-input__inner {
        padding: 0 5px;
      }
    }
  }
}
</style>
